<template>
	<view class="container">
		<view class="full-attendance common">
			<text>月全勤奖励</text>
			<view class="progress">
				<view>
					<text>月工作时长</text>	
					<!-- 工作时长溢出则right：0，太短则left：0 -->
					<text :style="{ right: list.alreadyTime > list.mTime ? 0 : (list.alreadyTime)*690/list.mTime+'rpx', left: list.alreadyTime/list.mTime < 0.12 ? 0 : ''}">{{list.alreadyTime}}/{{ list.mTime }}</text>
					<view class="line">
						<view class="time" :style="{width: list.alreadyTime*690/list.mTime + 'rpx'}"></view>
					</view>
				</view>
				<view>
					<text>月工作天数</text>	
					<text :style="{right: list.alreadyDay > list.mDay ? 0 : (list.mDay-list.alreadyDay)*690/list.mDay+'rpx', left: list.alreadyDay/list.mDay < 0.09 ? 0 : ''}">{{ list.alreadyDay }}/{{ list.mDay }}</text>
					<view class="line">
						<view class="day" :style="{width: list.alreadyDay*690/list.mDay + 'rpx'}"></view>
					</view>
				</view>
				
				<view>
				<text>月任务雇主数</text>
					<text :style="{right: list.numberuserid >textlie ? 0 : (textlie-list.numberuserid)*690/textlie+'rpx', left: list.numberuserid/textlie < 0.06 ? 0 : ''}">{{list.numberuserid}}/{{textlie}}</text>
				<view class="line">
					<view class="bad" :style="{width: list.numberuserid*690/textlie + 'rpx'}"></view>
				</view>
				</view>
				
				<view>
					<text>差评不高于{{list.mBadLimit ? list.mBadLimit : 0}}个</text>	
					<text :style="{right: list.alreadyBad > list.mBadLimit ? 0 : (list.mBadLimit-list.alreadyBad)*690/list.mBadLimit+'rpx', left: list.alreadyBad/list.mBadLimit < 0.06 ? 0 : ''}">{{list.alreadyBad}}/{{list.mBadLimit}}</text>
					<view class="line">
						<view class="bad" :style="{width: list.alreadyBad*690/list.mBadLimit + 'rpx'}"></view>
					</view>
				</view>
			
				
			
			</view>
		</view>
		
		<view class="plat-award common">
			<!-- <text>平台奖励政策</text> -->
			<view class="main">
				<jyf-parser :html="detail.articleContent" ref="article"></jyf-parser>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				detail: {},//文章
				bad: 1,//差评数
				textlie:0,
				list: {
					mTime: '',
					mDay: '',
					mBadLimit: '',
					alreadyTime: '',
					alreadyDay: '',
					alreadyBad: '',
					numberuserid:'',
				},
			}
		},
		
		methods: {
			// 获取文章详情
			async getArticleDetail () {
				let res = await this.$fetch(this.$api.get_article_by_id, { id: 2 }, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				res.data.articleContent = res.data.articleContent.replace(/width:/ig, 'aaa')
				this.detail = res.data
				// uni.setNavigationBarTitle({ title: this.detail.articleTitle })
			},
			
			// 获取当月活动
			async get_current_activity() {
				let res = await this.$fetch(this.$api.get_current_activity, {}, 'POST')
				let ress = await this.$fetch(this.$api.property_list_by_type, { type: 1 }, 'POST')
				/* console.log('获取当月活动res', res.data) */
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				this.textlie=ress.data.Release_num
				if(!res.data.userActivity) {
					this.list = res.data.activity
				}else {
					this.list = res.data.userActivity
				}
				this.list.alreadyBad = this.list.alreadyBad ? this.list.alreadyBad : 0
				this.list.alreadyDay = this.list.alreadyDay ? this.list.alreadyDay : 0
				this.list.alreadyTime = this.list.alreadyTime ? this.list.alreadyTime : 0
				this.list.numberuserid = this.list.numberuserid ? this.list.numberuserid : 0
			}
		},
		onShow() {
			this.get_current_activity()
			this.getArticleDetail()
		}
	}
</script>

<style lang="less">
.container {
	overflow: hidden;
	& > .common {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		& > text {
			height: 40rpx;
			position: relative;
			text-align: center;
			font-weight: bold;
			display: flex;
			align-items: center;
			&::before {
				content: "";
				position: absolute;
				left: -30rpx;
				width: 4rpx;
				height: 28rpx;
				background: #FCC928;
				border-radius: 1px;
			}
		}
		
	}
	& > .full-attendance {
		& > .progress {
			& > view {
				position: relative;
				margin-top: 44rpx;
				& > text:nth-child(1) {
					display: flex;
					height: 40rpx;
					margin-bottom: 64rpx;
				}
				
				& > text:nth-child(2){
					position: absolute;
					bottom: 18rpx;
					font-size: 12px;
				}
				& > .line {
					position: relative;
					width: 690rpx;
					background: #F5F3F1;
					height: 8rpx;
					border-radius: 5rpx;
					overflow: hidden;
					
				}
			}
			& > view:first-child {
				margin-top: 24rpx;
				.time {
					height: 8rpx;
					background-color: #F39B19;
				}
			}
			& > view:nth-child(2) {
				.day {
					height: 8rpx;
					background-color: #F39B19;
				}
			}
			& > view:nth-child(3) {
				.bad {
					height: 8rpx;
					background-color: #F39B19;
				}
				
			}
			& > view:nth-child(4) {
				.bad {
					height: 8rpx;
					background-color: #E02020;
				}
				
			}
		}
	}
	
	& > .plat-award {
		// border: 1px solid #000000;
			&::before {
			content: "";
			position: absolute;
			left: 0rpx;
			width: 4rpx;
			height: 28rpx;
			background: #FCC928;
			border-radius: 1px;
		}
	}
}

</style>
